<template>
  <t-tabs  size="medium" v-model="stepValue">
    <t-tab-panel  value="1" label="项目总体进展情况概述">
      <t-card class="step-card" size="small" title="项目总体进展情况概述（包括项目总体进度、经费使用情况、本年度参加研究的全时人数等）">
<!--        <div v-html="objData.overview"></div>-->
        <inner-html :content="objData.overview"></inner-html>

      </t-card>
    </t-tab-panel>
    <t-tab-panel  value="2" label="本报告期所开展的工作及计划执行情况">
      <t-card class="step-card" size="small" title="本报告期所开展的工作">
<!--        <div v-html="objData.projectAnnualReportPlan?.content"></div>-->
        <inner-html :content="objData.projectAnnualReportPlan?.content"></inner-html>

      </t-card>
      <t-card class="step-card" size="small" title="计划执行情况">
        <project-research-plan ref="project-research-plan" :projectId="projectId" :report-id="objId"
                               :edit-open="false" v-model="objData.projectAnnualReportPlan.researchPlans"></project-research-plan>
      </t-card>
    </t-tab-panel>
    <t-tab-panel  value="3" label="已取得的成果情况">
      <t-card class="step-card" size="small" title="已取得的成果情况（包括中期成果，已取得专利、发表论文、建立中试线、人才培养等情况的简要描述）">
<!--        <div v-html="objData.projectAnnualReportGetResults?.content"></div>-->
        <inner-html :content="objData.projectAnnualReportGetResults?.content"></inner-html>

      </t-card>
      <t-card class="step-card" size="small" title="已取得的成果情况">
        <project-approach-expect-results ref="project-approach-expect-results" :report-id="objId"
                                         v-model="objData.projectAnnualReportGetResults.projectExpectResults"
                                         :edit-open="false"></project-approach-expect-results>
      </t-card>
    </t-tab-panel>
    <t-tab-panel  value="4" label="组织管理经验、存在问题及建议">
      <t-card class="step-card" size="small" title="组织管理经验、存在问题及建议">
<!--        <div v-html="objData.projectAnnualReportExperience.content"></div>-->
        <inner-html :content="objData.projectAnnualReportExperience.content"></inner-html>

      </t-card>
    </t-tab-panel>
    <t-tab-panel value="5" v-if="!reviewOpen"  label="审批附件信息">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-table v-if="isMyProject" row-key="id" :columns="projectFileColumns" :data="projectFileData">
            <template #id="{row, rowIndex}">
              {{ rowIndex+1 }}
            </template>
            <template #op="{row}">
              <file-upload  @success="uploadSuccess"  tips="限制pdf、图片" accept="application/pdf,image/*" v-model="row.fileIds" :moduleKey="row.moduleKey"
                            :fileList="row.fileLists"
                            :multiple="true">
                <t-button variant="outline">
                  <t-icon name="cloud-upload" slot="icon"/>
                  点击上传
                </t-button>
              </file-upload>
            </template>
            <template #c1="{row}">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
          </t-table>
          <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
            <template #id="{row, rowIndex}">
              {{ rowIndex+1 }}
            </template>
            <template #c1="{row}">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
            <template  #op="{row}">
              <div v-for="(item,index) in row.fileLists" :key="index">
                <a class="t-button-link" target="_blank" :href="item.url" >
                  {{item.name}}
                </a>
              </div>
            </template>
          </t-table>
        </t-col>
      </t-row>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import {getFiles} from "@/api/common";
import TinyMceEditor from "@/components/TinyMceEditor/index.vue";
import projectResearchPlan from "./project-research-plan.vue";
import projectApproachExpectResults from "./project-approach-expectResults.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";


export default {
  name: "performance-report-detail",
  dicts: ['progress', 'adjust_content', 'main_reason', 'degree', 'prof_tit'],
  components:{
    TinyMceEditor,
    projectResearchPlan,
    projectApproachExpectResults,
    FileUpload,
    InnerHtml
  },
  props:{
    objId: [String,Number],
    projectId: [String,Number],
    reviewOpen: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isMyProject: false,
      stepValue: '1',
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "附件列表",
          align: "left",
        },
      ],
      projectFileData:[
        {
          id: 1,
          c1: "执行情况报告(盖章件)",
          c2: "审批通过后，从系统导出PDF线下盖章(申报用户上传)",
          moduleKey: "ZXQKBG",
          fileIds: [],
          fileLists: [],
        },
      ],
      objData:{
        projectAnnualReportPlan: {
          content: '',
          researchPlans: []
        },
        projectAnnualReportGetResults:{
          content: '',
          projectExpectResults: [],
        },
        projectAnnualReportExperience: {}
      },
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods:{
    getObj(){
      this.$api.kjsf.implement.getPerformanceReportAll(this.objId).then(response => {
        if(response.data.createUserId===Number(this.$store.state.user.userId)){
          this.isMyProject = true;
        }
        Object.assign(this.objData, response.data)
        // 获取附件
        getFiles(this.objId).then((res) => {
          const files = {}
          res.data.forEach((item) => {
            if (!files[item.moduleKey]) {
              files[item.moduleKey] = []
            }
            files[item.moduleKey].push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath
            })
          })
          this.projectFileData.forEach((val,index)=>{
            this.projectFileData[index].fileLists = files[val.moduleKey] || [];
            this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
          })
        });

      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    uploadSuccess(ids){
      this.$api.kjsf.implement.performanceReportUpdate({
        id: this.objId,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel{
  padding: 10px;
}
.step-card {
  height: 100%;
  margin-bottom: 14px;
}
.table-form {
  /deep/ .t-radio.t-is-disabled .t-radio__label {
    color: unset
  }
  /deep/ .t-checkbox.t-is-disabled .t-checkbox__label{
    color: unset
  }
  /deep/ .t-radio.t-is-disabled .t-radio__input{
    background-color: unset;
  }
  /deep/ .t-is-error .t-input__extra {
    position: static;
  }

  /deep/ .t-form__label {
    display: none;
  }

  .t-form__item {
    width: 100%;
  }

  .t-row {
    align-items: stretch;
    margin-bottom: 0px;

    .require {
      color: red;
      margin-right: 3px;
    }

    .t-col {
      border: 1px solid #ddd;
      color: #333;
      min-height: 37px;
      padding: 4px !important;
      //overflow: hidden;
      display: flex;
      align-items: center;
      margin: 0px -1px -1px 0px;

      .t-row {
        width: 100%;
      }
    }

    .title {
      background-color: #FAFAFA;
      justify-content: center;
      margin: 0px -1px -1px 0px;
      color: #000000;
      font-size: 16px;
      font-family: '宋体', serif;
      font-weight: bold;
    }
  }
}
</style>
